<template>
	<view class="conter">
		<!-- 详情图片 -->
		<view class="header">
			<view  style="display: flex; justify-content: center; ">
				<image  v-if="unuo == 1" src="../../static/images/icondiandan.png" mode=""></image>
				<u-icon v-if="unuo != 1" name="checkbox-mark" size="28" color="#46a6f8"></u-icon>
				<view style="margin-top: 8rpx;"  v-if="unuo != 1">
					抢购成功
				</view>
				<view class="fail" style="margin-top: 8rpx;" v-if="unuo == 1">
					取消成功
				</view>
			</view>
		</view>
		<view class="Details_picture">
			<image :src="imgUrl + collectionDetails.image" mode=""></image>
		</view>
		<!-- 详情图片 -->
		<!-- 金额 -->
		<view class="money">
			<view class="">金额：</view>
			<view style="display: flex;">
				<view style="font-size: 24rpx; margin-top: 5rpx">￥</view>
				<view class="">{{ price }}.00</view>
			</view>
		</view>
		<!-- 金额 -->
		<!-- 编号 -->
		<view class="number">
			<view class="">编号：</view>
			<view style="display: flex;">
				<view style="font-size: 24rpx; margin-top: 5rpx">#</view>
				<view>{{ petId }}</view>
			</view>
		</view>
		<!-- 编号 -->
		<!-- 说明 -->
		<view class="description">
			<view class="">说明：</view>
			<view style="margin-top: 17.44rpx">一、在账号有待支付订单时，不允许有其他下单行为。</view>
			<view style="margin-top: 8.72rpx">二、您抢购成功后请点击确认订单，在规定时间内完成下单动作。</view>
		</view>
		<!-- 说明 -->
		<!-- 底部购买 -->
		<view class="snapped_up">
			<view v-if="unuo != 1" @click="showClear = true" class="Cancel_button">取消</view>
			<view v-if="unuo != 1" @click="gopayment" class="purchase_button">确认订单</view>
			<view v-if="unuo == 1" @click="goback" class="Cancel_button">返回市场</view>
			<view v-if="unuo == 1" @click="goMarket" class="purchase_button">继续购买</view>
		</view>
		<!-- 底部购买 -->
		<!-- 弹框 -->
		<u-popup bgColor="transparent" :show="showClear" :round="26" mode="center">
			<view class="close">
				<view class="clmon">取消订单</view>
				<view class="clmonss">是否确认取消订单</view>
				<view class="clpmklj">
					<button v-on:click="showClear = false">取消</button>
					<button @click="configCancel">确定</button>
				</view>
			</view>
		</u-popup>
		<!-- 弹框 -->
	</view>
</template>

<script>
import { getPetDetail, initSaleCancel, orderPayment } from '@/api/starting/index.js';
import config from '@/config';
import { data } from 'uview-ui/libs/mixin/mixin';
export default {
	data() {
		return {
			unuo: '',
			imgUrl: config.imgUrl,
			RETURN_URL: config.RETURN_URL,
			id: null,
			petId: null,
			price: null,
			collectionDetails: {},
			showClear: false //清除缓存弹窗
		};
	},

	onLoad(option) {
		this.id = option.id;
		this.petId = option.petId;
		this.price = option.price;
	},
	created() {
		this.getPetDetails();
	},
	methods: {
		// 订单详情
		async getPetDetails() {
			let param = {};
			param.petId = this.petId;
			const data = await getPetDetail(param);
			this.collectionDetails = data.data;
		},
		// 取消订单
		async configCancel() {
			let param = {};
			param.petId = this.petId;
			param.CollectionId = this.id;
			const data = await initSaleCancel(param);
			if (data.code == 200) {
				this.unuo = 1;
				this.showClear = false;
				this.$modal.showToast('取消成功');
			} else {
				this.unuo = 1;
				this.showClear = false;
				this.$modal.showToast(data.msg);
			}
		},
		// 确认订单
		async gopayment() {
			let param = {};
			param.payType = 7;
			param.petId = this.petId;
			param.returnUrl = this.RETURN_URL + 'GoodSuccess?orderId=';
			const data = await orderPayment(param);
			if (data.code === 200) {
				uni.navigateTo({
					url: `/pages/HomeOrder/payment?payUrl=${data.data.payUrl}&id=${data.data.id}&petId=${data.data.petId}&name=${this.collectionDetails.name}`
				});
			} else {
				this.$modal.showToast(data.msg);
			}
		},
		goMarket() {
			uni.switchTab({
				url: '/pages/work/index'
			});
		},
		goback(){
			uni.switchTab({
				url: '/pages/work/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
// 整体
.conter {
	width: 100%;
	.header{
		width: 100%;
		height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: 'font';
		font-weight: 800;
		color: #46a6f8;
		image{
			width:41rpx;
			height: 41rpx;
			margin: 6rpx 12rpx;
		}
	}
	// 详情图片
	.Details_picture {
		width: 680rpx;
		height: 680rpx;
		image {
			width: 680rpx;
			height: 680rpx;
			border-radius: 14rpx;
			background-size: cover;
			margin: 0 34.88rpx;
		}
	}

	// 详情图片
	//金额
	.money {
		width: 680rpx;
		height: 84rpx;
		display: flex;
		justify-content:space-between;
		background: #130f26;
		border-radius: 14rpx;
		margin: 34.88rpx 34.88rpx;
		font-size: 35rpx;
		font-family: 'font';
		font-weight: 500;
		color: #ffffff;
		padding: 0 34.88rpx;
		line-height: 88rpx;
	}

	//金额
	// 编号
	.number {
		width: 680rpx;
		height: 84rpx;
		display: flex;
		justify-content:space-between;
		background: #130f26;
		border-radius: 14rpx;
		margin: 34.88rpx 34.88rpx;
		font-size: 35rpx;
		font-family: 'font';
		font-weight: 500;
		color: #ffffff;
		padding: 0 34.88rpx;
		line-height: 88rpx;
	}

	// 编号
	// description
	.description {
		// height: 350rpx;
		font-size: 21rpx;
		color: #8a92a3;
		margin: 87.21rpx 69.77rpx;
	}

	// description
	// 底部购买
	.snapped_up {
		width: 100%;
		position: fixed;
		display: flex;
		bottom: 0;
		justify-content: space-between;
		height: 155rpx;
		background: #130f26;
		padding: 26.46rpx 34.88rpx;
		font-size: 28rpx;
		font-family: 'font';
		font-weight: 700;
		color: #ffffff;

		.Cancel_button {
			width: 209rpx;
			height: 77rpx;
			background: #211f30;
			border-radius: 14rpx;
			border: 2rpx solid #3c424d;
			text-align: center;
			line-height: 77rpx;
		}

		.purchase_button {
			width: 436rpx;
			height: 77rpx;
			background: #46a6f8;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 14rpx;
			line-height: 80rpx;
			text-align: center;
		}
	}

	// 底部购买
	// 弹框
	.close {
		width: 500rpx;
		height: 350rpx;
		background: #0d0e11;
		box-shadow: 0rpx 9rpx 26rpx 0rpx rgba(0, 0, 0, 0.35);
		border-radius: 26rpx;
		opacity: 1;
		border: 2rpx solid #8a92a3;
		.clmon {
			font-size: 40rpx;
			font-family: 'font';
			font-weight: 800;
			color: #ffffff;
			text-align: center;
			margin: 52.33rpx 0;
		}

		.clmonss {
			font-size: 28rpx;
			font-family: 'font';
			font-weight: 400;
			color: #8a92a3;
			text-align: center;
		}
		.clpmklj {
			display: flex;
			margin: 40rpx 0;
			button:nth-child(2) {
				width: 180rpx;
				height: 78rpx;
				background: linear-gradient(90deg, #3ADFEB 0%, #4463FF 100%);
				border-radius: 16rpx;
				opacity: 1;
				font-size: 31rpx;
				font-family: 'font';
				font-weight: 800;
				color: #ffffff;
				line-height: 85rpx;
			}

			button:nth-child(1) {
				width: 180rpx;
				height: 78rpx;
				background: gray;
				border-radius: 16rpx;
				opacity: 1;
				font-size: 31rpx;
				font-family: 'font';
				font-weight: 800;
				color: #ffffff;
				line-height: 85rpx;
			}
		}
	}
	// 弹框
}

// 整体
</style>
